<template name="membersList">
	{{> videoCall}}
	{{#if isGroupChat}}
	{{#with roomUsers}}
		<div class="flex-tab__header">
			<form class="search-form rc-member-list__search js-search-form" role="form">
				<div class="rc-input">

					<div class="rc-input__icon">
						{{> icon block="rc-input__icon-svg" icon="magnifier"}}
					</div>
					<input type="text" class="rc-input__element js-filter" name="user-search" id="user-search" placeholder={{_ "Search_by_username"}} autocomplete="off" aria-label="{{_ "Search_by_username"}}" />

				</div>
				<label class="rc-select">
					<select class="rc-select__element js-type" name="status-type" aria-label="{{_ "Status"}}">
						<option value="online">{{_ 'online'}}</option>
						<option value="all">{{_ 'All_users'}}</option>
					</select>
					{{> icon block="rc-select__arrow" icon="arrow-down" }}
				</label>
			</form>

			{{#unless loading}}
				<div class="rc-user-info__row rc-user-info__row--separator">
					<div class="rc-member-list__counter">{{{_ "Showing_online_users" total_showing=totalShowing online=totalOnline total=total}}}</div>
				</div>
			{{/unless}}
		</div>
		<div class="flex-tab__result list-view">
			{{#if loading}}
				{{> loading}}
			{{else}}
				<ul class='list clearfix lines'>
					{{#each users}}
						<li class='rc-member-list__user'>
							{{> avatar url=avatarUrl}}
							<div class="rc-member-list__username">
								{{# userPresence uid=user._id}}<div class="rc-member-list__status rc-member-list__status--{{status}}"></div>{{/userPresence}}
								{{ignored}} {{displayName}} {{utcOffset}}
								</div>
							{{> icon user=. block="rc-member-list__menu js-more" icon="menu" }}
						</li>
					{{/each}}
				</ul>
			{{/if}}
			{{#if hasMore}}
				<button class="rc-button rc-button--secondary show-more-users {{#if loadingMore}}loading{{/if}}">{{_ "Show_more"}}</button>
			{{/if}}
		</div>
		<div class="rc-button__group rc-button__group--stretch">
			{{#if canAddUser}}
				<button class="rc-button rc-button--primary js-add">{{> icon block="rc-input__icon-svg" icon="plus"}}{{_ "Add_users"}}</button>

				{{#if canInviteUser}}
					<button class="rc-button rc-button--primary js-invite">{{> icon block="rc-input__icon-svg" icon="user-plus"}}{{_ "Invite_Users"}}</button>
				{{/if}}
			{{/if}}
		</div>

		{{/with}}
	{{/if}}
	<div class="rc-user-info-container flex-nav animated{{#unless showUserInfo}} animated-hidden{{/unless}}">
		{{> userInfo (userInfoDetail)}}
	</div>
</template>
